<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--
      v-bind:title.stop="xxxx"
        v-bind  - 指令
        :title  - 指令参数
        .stop   - 指令修饰符
        xxxx    - 指令绑定的值


      
      在 Vue3 中在组件上可以使用多次 v-model 。传递不同的参数实现多个数据的双向绑定。该操作在 Vue2 中如何玩？？？


          1. Vue2 中 v-model 不支持参数  v-model:xxxx 的传递。

          需要使用一个 v-bind 的 .sync 修饰符来实现

      
          <Pseron :xx.sync="msg"  :yy.sync="count" :value.sync="name" />

          展开如下：

          <Perons 
            :xx="msg"
            @update:xx="msg = $event"

            :yy="count"
            @update:yy="count = $event"

            :value="name"
            @update:value="name = $event"
          />

          
     -->

    <div id="app"></div>

    <script src="../lib/vue-2.js"></script>

    <script>
      Vue.component("Person", {
        template: `
          <div>
            <p>姓名：{{ value }}</p>
            <p>xx:  {{ xx }}</p>
            <p>yy:  {{ yy }}</p>
            
            <button @click="$emit('update:value', '张三')">修改 - 张三</button>
            <button @click="$emit('update:value', '里斯')">修改 - 里斯</button>
            <button @click="$emit('update:value', '王五')">修改 - 王五</button>

            <hr />

            <button @click="$emit('update:xx', 'world')">修改 xx => world</button>

            <hr />
            <button @click="$emit('update:yy', yy+1)">YY ++</button>
            <button @click="$emit('update:yy', yy-1)">YY --</button>
          </div>
        `,
        props: ["value", "xx", "yy"],
      });

      new Vue({
        data() {
          return {
            name: "王八",
            msg: "hello",
            count: 10,
          };
        },

        template: `
          <div>
            <h1>根组件</h1>
            <Person :value.sync="name" :xx.sync="msg" :yy.sync="count" />  
          </div>
        `,
      }).$mount("#app");
    </script>
  </body>
</html>
